@font-face {
  font-family: inconsolata;
  src: url('../fonts/Inconsolata.otf');
}

@font-face {
  font-family: montserrat-bold;
  src: url('../fonts/Montserrat-Bold.ttf');
}

@font-face {
  font-family: montserrat;
  src: url('../fonts/Montserrat-Regular.ttf');
}

body, html {
  background: #fbfbfb;
  color: #231f20;
  height: 100%;
  margin: 0;
  padding: 0;
  font: 14px montserrat, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  overflow: hidden;
  height: 100%;
}

#flex-container {
  display: flex;
  flex-direction: row;
  height: 100%;
}

.file-handler {
  display: none;
}

::-webkit-scrollbar-track {
  background: rgba(153, 153, 153, 0.1);
}

::-webkit-scrollbar-thumb {
  background-color: #d8d8d8;
  border: 4px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}
::-webkit-scrollbar {
    width: 16px;
}


.button {
  cursor: pointer;
}

.button:hover {
  opacity: 0.6;
}

#header-container {
  height: 44px;
  margin-top: 30px;
  margin-left: 102px;
}

#logo {
  height: 43px;
  float: left;
  margin-right: 25px;
}

#play {
  background: none;
  background-image: url('../images/play-button.svg');
  border: 0;
  width: 44px;
  height: 44px;
  font-size: 25px;
  display: inline;
  outline: 0; 
  float: left;

  &.running {
    background-image: url('../images/stop-button.svg');
  }
}  

#settings {
  width: 44px;
  height: 44px;
}

#project-name {
  font-size: 12px;
  padding-left: 20px;
  color: #b5b5b5;
  margin-top: 14px;
  margin-bottom: 10px;
  cursor: default; 
  float:left;
}


#toolbar {
  height: 60px;
  width: 100%;
}

#actions {
  
  #add, #export {
    float: left;
  }

  #settings {
    float: right;
    margin-right: 15px;
  }
}

